<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/myblog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/myblog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/myblog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/myblog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/myblog/css/main.css">



<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"kuang-yudi.gitee.io","root":"/myblog/","images":"/myblog/images","scheme":"Gemini","version":"8.1.0","exturl":false,"sidebar":{"position":"right","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"gitalk","storage":true,"lazyload":false,"nav":null,"activeClass":"gitalk"},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/myblog/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}};
  </script>
<meta name="description" content="前端安全性、XSS、CSRF、跨域、数据加密、http、https、websocket">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试题1">
<meta property="og:url" content="http://kuang-yudi.gitee.io/myblog/2021/01/02/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%981/index.html">
<meta property="og:site_name" content="KY迪的个人博客">
<meta property="og:description" content="前端安全性、XSS、CSRF、跨域、数据加密、http、https、websocket">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-01-02T07:39:29.000Z">
<meta property="article:modified_time" content="2021-01-11T13:01:01.212Z">
<meta property="article:author" content="匡宇迪">
<meta property="article:tag" content="前端安全性">
<meta property="article:tag" content="XSS">
<meta property="article:tag" content="CSRF">
<meta property="article:tag" content="跨域">
<meta property="article:tag" content="数据加密">
<meta property="article:tag" content="http">
<meta property="article:tag" content="https">
<meta property="article:tag" content="websocket">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://kuang-yudi.gitee.io/myblog/2021/01/02/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%981/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>
<title>前端面试题1 | KY迪的个人博客</title>
  



  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/myblog/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">KY迪的个人博客</h1>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">个人技术博客</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/myblog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-tags"><a href="/myblog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
        <li class="menu-item menu-item-categories"><a href="/myblog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-archives"><a href="/myblog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <section class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8%E6%80%A7%E9%97%AE%E9%A2%98"><span class="nav-number">1.</span> <span class="nav-text">一、前端安全性问题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-xss-%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB%E5%8E%9F%E7%90%86%EF%BC%9F%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%EF%BC%9F%E9%98%B2%E5%BE%A1%E6%89%8B%E6%AE%B5%EF%BC%9F"><span class="nav-number">1.1.</span> <span class="nav-text">1. xss 跨站脚本攻击原理？如何进行？防御手段？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-CSRF-%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0%E7%9A%84%E5%8E%9F%E7%90%86%EF%BC%9F%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%EF%BC%9F%E9%98%B2%E5%BE%A1%E6%89%8B%E6%AE%B5%EF%BC%9F"><span class="nav-number">1.2.</span> <span class="nav-text">2. CSRF 跨站请求伪造的原理？如何进行？防御手段？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-web-%E4%B8%8A%E4%BC%A0%E6%BC%8F%E6%B4%9E%E5%8E%9F%E7%90%86%EF%BC%9F%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%EF%BC%9F%E9%98%B2%E5%BE%A1%E6%89%8B%E6%AE%B5"><span class="nav-number">1.3.</span> <span class="nav-text">3. web 上传漏洞原理？如何进行？防御手段?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E5%89%8D%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%8A%A0%E5%AF%86"><span class="nav-number">1.4.</span> <span class="nav-text">4. 前端数据加密</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98"><span class="nav-number">2.</span> <span class="nav-text">二、跨域问题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5"><span class="nav-number">2.1.</span> <span class="nav-text">1. 同源策略</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F"><span class="nav-number">2.2.</span> <span class="nav-text">2. 解决跨域</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81HTTP-%E7%9B%B8%E5%85%B3%E9%97%AE%E9%A2%98"><span class="nav-number">3.</span> <span class="nav-text">三、HTTP 相关问题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%B8%B8%E7%94%A8%E7%8A%B6%E6%80%81%E7%A0%81"><span class="nav-number">3.1.</span> <span class="nav-text">1. 常用状态码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-Http-%E5%92%8C-Https-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">3.2.</span> <span class="nav-text">2. Http 和 Https 的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-WebSocket"><span class="nav-number">3.3.</span> <span class="nav-text">3. WebSocket</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-Http-%E8%AF%B7%E6%B1%82%E7%9A%84%E6%96%B9%E6%B3%95"><span class="nav-number">3.4.</span> <span class="nav-text">4. Http 请求的方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#4-1-GET%E2%80%94%E2%80%94%E8%8E%B7%E5%8F%96%E8%B5%84%E6%BA%90"><span class="nav-number">3.4.1.</span> <span class="nav-text">4.1 GET——获取资源</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-2-POST%E2%80%94%E2%80%94%E4%BC%A0%E8%BE%93%E5%AE%9E%E4%BD%93%E4%B8%BB%E4%BD%93"><span class="nav-number">3.4.2.</span> <span class="nav-text">4.2 POST——传输实体主体</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-3-PUT%E2%80%94%E2%80%94%E6%9B%B4%E6%96%B0%E6%8C%87%E5%AE%9A%E4%BD%8D%E7%BD%AE%E5%86%85%E5%AE%B9"><span class="nav-number">3.4.3.</span> <span class="nav-text">4.3 PUT——更新指定位置内容</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-4-HEAD%E2%80%94%E2%80%94%E8%8E%B7%E5%8F%96%E5%93%8D%E5%BA%94%E5%A4%B4"><span class="nav-number">3.4.4.</span> <span class="nav-text">4.4 HEAD——获取响应头</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-5-DELETE%E2%80%94%E2%80%94%E5%88%A0%E9%99%A4%E6%8C%87%E5%AE%9A%E8%B5%84%E6%BA%90"><span class="nav-number">3.4.5.</span> <span class="nav-text">4.5 DELETE——删除指定资源</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-6-TRACE%E2%80%94%E2%80%94%E8%BF%BD%E6%BA%AF"><span class="nav-number">3.4.6.</span> <span class="nav-text">4.6 TRACE——追溯</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-7-OPTIONS%E2%80%94%E2%80%94%E9%80%89%E9%A1%B9"><span class="nav-number">3.4.7.</span> <span class="nav-text">4.7 OPTIONS——选项</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-8-CONNECT"><span class="nav-number">3.4.8.</span> <span class="nav-text">4.8 CONNECT</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-9-GET-%E4%B8%8E-POST-%E6%AF%94%E8%BE%83"><span class="nav-number">3.4.9.</span> <span class="nav-text">4.9 GET 与 POST 比较</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-HTTP-%E7%AE%80%E4%BB%8B"><span class="nav-number">3.5.</span> <span class="nav-text">5. HTTP 简介</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-HTTP-%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86"><span class="nav-number">3.6.</span> <span class="nav-text">6. HTTP 工作原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-HTTP-%E8%AF%B7%E6%B1%82%E5%93%8D%E5%BA%94%E7%9A%84%E6%AD%A5%E9%AA%A4"><span class="nav-number">3.7.</span> <span class="nav-text">7. HTTP 请求响应的步骤</span></a></li></ol></li></ol></div>
        </section>
        <!--/noindex-->

        <section class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="匡宇迪"
      src="https://static.pptstore.net/picture/19/19/e1feb44f42cdf7e1202b_s.jpg">
  <p class="site-author-name" itemprop="name">匡宇迪</p>
  <div class="site-description" itemprop="description">用于记录学习web前端</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/myblog/archives/">
        
          <span class="site-state-item-count">38</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/myblog/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/myblog/tags/">
          
        <span class="site-state-item-count">87</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/tonykyd/tonykyd.github.io" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;tonykyd&#x2F;tonykyd.github.io" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:1303665509@qq.com" title="E-Mail → mailto:1303665509@qq.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



        </section>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://kuang-yudi.gitee.io/myblog/2021/01/02/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%981/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://static.pptstore.net/picture/19/19/e1feb44f42cdf7e1202b_s.jpg">
      <meta itemprop="name" content="匡宇迪">
      <meta itemprop="description" content="用于记录学习web前端">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="KY迪的个人博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          前端面试题1
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-01-02 15:39:29" itemprop="dateCreated datePublished" datetime="2021-01-02T15:39:29+08:00">2021-01-02</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-01-11 21:01:01" itemprop="dateModified" datetime="2021-01-11T21:01:01+08:00">2021-01-11</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/myblog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">面试题</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
</div>

            <div class="post-description">前端安全性、XSS、CSRF、跨域、数据加密、http、https、websocket</div>
        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="一、前端安全性问题"><a href="#一、前端安全性问题" class="headerlink" title="一、前端安全性问题"></a>一、前端安全性问题</h2><h3 id="1-xss-跨站脚本攻击原理？如何进行？防御手段？"><a href="#1-xss-跨站脚本攻击原理？如何进行？防御手段？" class="headerlink" title="1. xss 跨站脚本攻击原理？如何进行？防御手段？"></a>1. xss 跨站脚本攻击原理？如何进行？防御手段？</h3><p><strong>1.1 如何进行</strong>：XSS 是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，<font color="blue">添加一些代码</font>，嵌入到 web 页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。</p>
<p><strong>1.2 主要原理</strong>：过于信任客户端提交的数据！</p>
<p><strong>1.3 防御手段</strong>：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。</p>
<hr>
<h3 id="2-CSRF-跨站请求伪造的原理？如何进行？防御手段？"><a href="#2-CSRF-跨站请求伪造的原理？如何进行？防御手段？" class="headerlink" title="2. CSRF 跨站请求伪造的原理？如何进行？防御手段？"></a>2. CSRF 跨站请求伪造的原理？如何进行？防御手段？</h3><p><strong>2.1 如何进行</strong>：当你在某网页登录之后，在没有关闭网页的情况下，点击别的链接会利用浏览器的 cookie 把密码改掉。</p>
<p><strong>2.2 主要原理</strong>：在没有关闭相关网页的情况下，点击其他人发来的 CSRF 链接，利用客户端的 cookie 直接向服务器发送请求。</p>
<p><strong>2.3 防御手段</strong>：</p>
<p>2.3.1 检测 Referer（http 协议中的头字段）</p>
<p><strong>2.3.2 Anti-CSRF token 机制/自定义 Header（推荐）</strong>：<br>① 在 form 表单或头信息中传递 token<br>② token 由服务端生成并存储，每次请求生成的 token 都不一样(随机)<br>③ 服务端通过拦截器验证有效性(即验证是否与存储的 token 一致)<br>④ 拒绝校验失败的请求</p>
<p><strong>2.3.3 加入验证码</strong></p>
<hr>
<h3 id="3-web-上传漏洞原理？如何进行？防御手段"><a href="#3-web-上传漏洞原理？如何进行？防御手段" class="headerlink" title="3. web 上传漏洞原理？如何进行？防御手段?"></a>3. web 上传漏洞原理？如何进行？防御手段?</h3><p><strong>3.1 如何进行</strong>：用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。</p>
<p><strong>3.2 主要原理</strong>：当文件上传时没有对文件的格式和上传用户做验证，导致任意用户可以上传任意文件，那么这就是一个上传漏洞。</p>
<p><strong>3.3 防御手段</strong>：</p>
<p>① 最有效的，将文件上传目录直接设置为不可执行，对于 Linux 而言，撤销其目录的’x’权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；<br>② 文件类型检查：强烈推荐白名单方式，结合 MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或 resize 函数，处理图片的同时破坏其包含的 HTML 代码；<br>③ 使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；<br>④ 单独设置文件服务器的域名；</p>
<hr>
<h3 id="4-前端数据加密"><a href="#4-前端数据加密" class="headerlink" title="4. 前端数据加密"></a>4. 前端数据加密</h3><p><strong>4.1 base64 加密</strong></p>
<p>原理：基于 64 个可打印字符来表示二进制数据(源数据——&gt;二进制——&gt;字符)</p>
<p>原生 js 实现：<br>加密 window.btoa（Data） 解密 window.atob(base64 字符)</p>
<p>注意：对中文进行解密及加密需要先对中文进行转码<br>window.btoa(window.encodeURIComponent(“中文”))<br>window.decodeURIComponent(window.atob(base64 字符))</p>
<p><strong>4.2 md5 加密</strong></p>
<p>md5：消息摘要算法(Message-Digest Algorithm)<br>定义：一种被广泛使用的密码散列函数，可以产生出一个 128 位（16 字节）的散列值（hash value），用于确保信息传输完整一致（校验文件）</p>
<p>用途：不推荐用于加密，主要用于文件校验(每个文件都有 md5 值，只要发生改变就证明文件改过)</p>
<hr>
<h2 id="二、跨域问题"><a href="#二、跨域问题" class="headerlink" title="二、跨域问题"></a>二、跨域问题</h2><h3 id="1-同源策略"><a href="#1-同源策略" class="headerlink" title="1. 同源策略"></a>1. 同源策略</h3><p><strong>1.1 定义</strong>：”协议+域名+端口”三者相同，其中任何不同都会导致跨域</p>
<p><strong>1.2 作用</strong>：保护用户信息安全，防止网站获取另一网站的 cookie 信息，受到 XSS、CSRF 攻击</p>
<hr>
<h3 id="2-解决跨域"><a href="#2-解决跨域" class="headerlink" title="2. 解决跨域"></a>2. 解决跨域</h3><p><strong>2.1 JSONP 实现跨域(通过 script 标签的跨域特性实现)</strong><br>① 创建 script 标签，src 为请求地址<br>② 请求地址中的请求参数为一个回调函数<br>③ 在客户端提前定义好此回调函数<br>④ 在服务端拿到请求参数中的回调函数并和以字符串形式的数据拼接返回<br>（③、④ 可直接通过 jsonp 方法，参数传递数据）<br>⑤ 客户端拿到数据就是函数的调用，参数为服务端数据</p>
<p>限制：</p>
<p>需要服务的支持<br>只能发起 GET 请求</p>
<p><strong>2.2 CORS 实现跨域</strong><br>在服务端设置响应头允许跨域</p>
<p>① Access-Control-Allow-Origin.HTTP 响应头，指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的 JavaScript 访问资源，但是在响应一个携带身份信息(Credential)的 HTTP 请求时，Access-Control-Allow-Origin 必需指定具体的域，不能用通配符。<br>② Access-Control-Allow-Methods。HTTP 响应头，指定服务器允许进行跨域资源访问的请求方法列表，一般用在响应预检请求上。<br>③ Access-Control-Allow-Headers。HTTP 响应头，指定服务器允许进行跨域资源访问的请求头列表，一般用在响应预检请求上。</p>
<hr>
<h2 id="三、HTTP-相关问题"><a href="#三、HTTP-相关问题" class="headerlink" title="三、HTTP 相关问题"></a>三、HTTP 相关问题</h2><h3 id="1-常用状态码"><a href="#1-常用状态码" class="headerlink" title="1. 常用状态码"></a>1. 常用状态码</h3><p>1xx：信息状态码–表示请求已接收，正在处理<br>2xx：成功状态码–表示请求正常处理完毕<br>3xx：重定向状态码–要完成请求必须进行更进一步的操作(客户端被重定向到其他资源。)<br>4xx：客户端错误状态码–请求有语法错误或请求无法实现<br>5xx：服务器端错误状态码–服务器处理请求出错</p>
<hr>
<h3 id="2-Http-和-Https-的区别"><a href="#2-Http-和-Https-的区别" class="headerlink" title="2. Http 和 Https 的区别"></a>2. Http 和 Https 的区别</h3><p>2.1、https 协议需要到 ca 申请证书，一般免费证书较少，因而需要一定费用。</p>
<p>2.2、http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。</p>
<p>2.3、http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。</p>
<p>2.4、http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。</p>
<hr>
<h3 id="3-WebSocket"><a href="#3-WebSocket" class="headerlink" title="3. WebSocket"></a>3. WebSocket</h3><p><strong>3.1 定义</strong>：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。</p>
<p><strong>3.2 特点</strong>：允许服务端主动向客户端推送数据。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。</p>
<p><strong>3.3 ajax 轮询</strong>：轮询是在特定的的时间间隔（如每 1 秒），由浏览器对服务器发出 HTTP 请求，然后由服务器返回最新的数据给客户端的浏览器。<br>缺点：浏览器需要不断的向服务器发出请求，然而 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。</p>
<p><strong>3.4 websocket 长轮询</strong>：<br>浏览器和服务器只需要做一个握手的动作，形成了一条快速通道。两者之间就直接可以数据互相传送。<br>优点：能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。</p>
<h3 id="4-Http-请求的方法"><a href="#4-Http-请求的方法" class="headerlink" title="4. Http 请求的方法"></a>4. Http 请求的方法</h3><h4 id="4-1-GET——获取资源"><a href="#4-1-GET——获取资源" class="headerlink" title="4.1 GET——获取资源"></a>4.1 GET——获取资源</h4><p>GET 方法用来请求 URL 指定的资源。指定的资源经服务器端解析后返回响应内容。（请求指定页面信息，并返回实体主体，没有请求内容）</p>
<h4 id="4-2-POST——传输实体主体"><a href="#4-2-POST——传输实体主体" class="headerlink" title="4.2 POST——传输实体主体"></a>4.2 POST——传输实体主体</h4><p>向指定资源提交数据进行处理请求（提交表单、上传文件），数据被包含在请求体中；可能导致新的资源的建立或原有资源的修改</p>
<h4 id="4-3-PUT——更新指定位置内容"><a href="#4-3-PUT——更新指定位置内容" class="headerlink" title="4.3 PUT——更新指定位置内容"></a>4.3 PUT——更新指定位置内容</h4><p>向指定资源位置上传其最新内容（从客户端向服务器传送的数据取代指定文档的内容）</p>
<h4 id="4-4-HEAD——获取响应头"><a href="#4-4-HEAD——获取响应头" class="headerlink" title="4.4 HEAD——获取响应头"></a>4.4 HEAD——获取响应头</h4><p>与服务器索与 get 请求一致的响应，只不过响应体不会返回，获取包含在小消息头中的原信息（与 get 请求类似，返回的响应中没有具体内容，用于获取报头，检查某一资源在向其提交 GET 请求前是否存在。）</p>
<h4 id="4-5-DELETE——删除指定资源"><a href="#4-5-DELETE——删除指定资源" class="headerlink" title="4.5 DELETE——删除指定资源"></a>4.5 DELETE——删除指定资源</h4><p>请求服务器删除 Request-URL 所标识的资源（请求服务器删除页面）</p>
<h4 id="4-6-TRACE——追溯"><a href="#4-6-TRACE——追溯" class="headerlink" title="4.6 TRACE——追溯"></a>4.6 TRACE——追溯</h4><p>让服务器端将之前的请求通信环返回给客户端。客户端可以用 TRACE 方法查询发送出去的请求时怎样被加工修改的。不常用，还容易引发 XST 攻击。主要用于测试或诊断</p>
<h4 id="4-7-OPTIONS——选项"><a href="#4-7-OPTIONS——选项" class="headerlink" title="4.7 OPTIONS——选项"></a>4.7 OPTIONS——选项</h4><p>返回服务器针对特定资源所支持的 HTTP 请求方法，也可以利用向 web 服务器发送‘*’的请求来测试服务器的功能性</p>
<h4 id="4-8-CONNECT"><a href="#4-8-CONNECT" class="headerlink" title="4.8 CONNECT"></a>4.8 CONNECT</h4><p>HTTP/1.1 协议中能够将连接改为管道方式的代理服务器(主要使用 SSL 和 TSL 协议把通信内容加密后经网络隧道传输。)</p>
<h4 id="4-9-GET-与-POST-比较"><a href="#4-9-GET-与-POST-比较" class="headerlink" title="4.9 GET 与 POST 比较"></a>4.9 GET 与 POST 比较</h4><p><strong>各自特点：</strong><br>“get”方法<strong>提交的数据会直接填充在请求报文的 URL 上</strong>，“？”问号划分域名和 get 提交的参数，多个参数之间用&amp;进行分割，如果参数值是中文，则会转换成诸如%ab%12 加密 16 进制码。一般来说，浏览器处理的 URL 最大限度长度为 1024B（不同浏览器不一样），所以 <strong>GET 方法提交参数长度有限制</strong>。</p>
<p>“post”方法提交的数据会附在正文(请求体)上，一般请求正文的长度是没有限制的，但表单中所能处理的长度一般为 100k（不同协议不同浏览器不一样）,而且需要考虑下层报文的传输效率，不推荐过长。</p>
<p><strong>使用场景：</strong><br>所以 GET 方法可以用来传输一些可以公开的参数信息，解析也比较方便，如百度的搜索的关键词，而 POST 方法可以用来提交一个用户的敏感信息（如果不使用 HTTPS 加密，报文正文仍旧是明文，容易被人截获读取）</p>
<h3 id="5-HTTP-简介"><a href="#5-HTTP-简介" class="headerlink" title="5. HTTP 简介"></a>5. HTTP 简介</h3><p>HTTP（HyperText Transfer Protocol）即超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则，它是万维网交换信息的基础，它允许将 HTML（超文本标记语言）文档从 Web 服务器传送到 Web 浏览器。<br>基于 TCP/IP 通信协议来传递数据。</p>
<h3 id="6-HTTP-工作原理"><a href="#6-HTTP-工作原理" class="headerlink" title="6. HTTP 工作原理"></a>6. HTTP 工作原理</h3><p>HTTP 协议<strong>定义</strong> Web 客户端如何从 Web 服务器请求 Web 页面，以及服务器如何把 Web 页面传送给客户端。HTTP 协议采用了<strong>请求/响应</strong>模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。</p>
<p>HTTP 默认端口号为 80，但是你也可以改为 8080 或者其他端口。</p>
<h3 id="7-HTTP-请求响应的步骤"><a href="#7-HTTP-请求响应的步骤" class="headerlink" title="7. HTTP 请求响应的步骤"></a>7. HTTP 请求响应的步骤</h3><p>客户端连接到 Web 服务器 ——&gt;发送 Http 请求 ——&gt;服务器接受请求并返回 HTTP 响应 ——&gt;释放连接 TCP 连接 ——&gt;客户端浏览器解析 HTML 内容</p>
<p><strong>7.1</strong> 客户端连接到 Web 服务器<br>客户端(浏览器)，与 Web 服务器的 HTTP 端口（默认为 80）建立一个 TCP 套接字连接。</p>
<p><strong>7.2</strong> 发送 HTTP 请求<br>通过 TCP 套接字，客户端向 Web 服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据 4 部分组成。</p>
<p><strong>7.3</strong> 服务器接受请求并返回 HTTP 响应<br>Web 服务器解析请求，定位请求资源。服务器将资源复本写到 TCP 套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据 4 部分组成。</p>
<p><strong>7.4</strong> 释放 TCP 连接<br>若 connection 模式为 close，则服务器主动关闭 TCP 连接，客户端被动关闭连接，释放 TCP 连接;若 connection 模式为 keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;</p>
<p><strong>7.5</strong> 客户端浏览器解析 HTML 内容渲染页面<br>客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的 HTML 文档和文档的字符集。客户端浏览器读取响应数据 HTML，根据 HTML 的语法对其进行格式化，并在浏览器窗口中显示。</p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="followme">
  <span>欢迎关注我的其它发布渠道</span>

  <div class="social-list">

      <div class="social-item">
        <a target="_blank" class="social-link" href="/myblog/images/wechat_channel.jpg">
          <span class="icon">
            <i class="fab fa-weixin"></i>
          </span>

          <span class="label">WeChat</span>
        </a>
      </div>
  </div>
</div>

          <div class="post-tags">
              <a href="/myblog/tags/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8%E6%80%A7/" rel="tag"># 前端安全性</a>
              <a href="/myblog/tags/XSS/" rel="tag"># XSS</a>
              <a href="/myblog/tags/CSRF/" rel="tag"># CSRF</a>
              <a href="/myblog/tags/%E8%B7%A8%E5%9F%9F/" rel="tag"># 跨域</a>
              <a href="/myblog/tags/%E6%95%B0%E6%8D%AE%E5%8A%A0%E5%AF%86/" rel="tag"># 数据加密</a>
              <a href="/myblog/tags/http/" rel="tag"># http</a>
              <a href="/myblog/tags/https/" rel="tag"># https</a>
              <a href="/myblog/tags/websocket/" rel="tag"># websocket</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/myblog/2020/12/18/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0/" rel="prev" title="第一篇文章">
                  <i class="fa fa-chevron-left"></i> 第一篇文章
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/myblog/2021/01/05/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%982/" rel="next" title="前端面试题2">
                  前端面试题2 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments" id="gitalk-container"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">匡宇迪</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  
  <script src="//cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script src="/myblog/js/utils.js"></script><script src="/myblog/js/motion.js"></script><script src="/myblog/js/next-boot.js"></script>

  
<script src="/myblog/js/local-search.js"></script>






  
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>






<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1.7.0/dist/gitalk.css">

<script>
NexT.utils.loadComments('#gitalk-container', () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1.7.0/dist/gitalk.min.js', () => {
    var gitalk = new Gitalk({
      clientID    : '1926f8a1c453a1121d8d',
      clientSecret: '426722f9eef7599f8ebb3220379e704ea007a5f2',
      repo        : '',
      owner       : '',
      admin       : [''],
      id          : '4a3d3b95a22fcbe95f9079a89cfb7b3b',
        language: '',
      distractionFreeMode: true
    });
    gitalk.render('gitalk-container');
  }, window.Gitalk);
});
</script>

</body>
</html>
